<template>
    <div>
        <el-card>
            <ReturnPage></ReturnPage>

            <el-tabs v-model="activeName"
                     @tab-click="handleClick">

                <el-tab-pane label="监控项"
                             name="first">
                    <el-form ref="form"
                             :model="form"
                             label-width="300"
                             label-position="right">
                        <el-form-item label="名称"
                                      label-width="125px">
                            <el-input v-model="form.name"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form-item label="键值"
                                      label-width="125px">
                            <el-input v-model="form.key"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form-item label="更新间隔"
                                      label-width="125px">
                            <el-input v-model="form.time"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form-item label="历史数据保留时长"
                                      label-width="125px">
                            <el-checkbox-group v-model="form.type">
                                <el-checkbox-button label="不保留历史数据"
                                                    name="type"></el-checkbox-button>
                                <el-checkbox-button label="Storage period"
                                                    name="type"
                                                    checked="true"></el-checkbox-button>
                                <el-checkbox-button label="90d"
                                                    name="type"></el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="趋势存储时间"
                                      label-width="125px">
                            <el-checkbox-group v-model="form.type1">
                                <el-checkbox-button label="不保留趋势数据"
                                                    name="type1"></el-checkbox-button>
                                <el-checkbox-button label="Storage period"
                                                    name="type1"
                                                    checked="true"></el-checkbox-button>
                                <el-checkbox-button label="365d"
                                                    name="type1"></el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="onSubmit"
                                       size="mini">确定</el-button>

                        </el-form-item>
                    </el-form></el-tab-pane>
                <el-tab-pane label="标记"
                             name="second">
                    <el-form ref="markForm"
                             :rules="formRules"
                             :inline="true"
                             :model="markForm"
                             label-width="125px">
                        <div style="margin-bottom:20px;margin-left:125px;">
                            <el-radio v-model="radio"
                                      label="1"
                                      style="font-size:16px">Item tags</el-radio>
                            <el-radio v-model="radio"
                                      label="2"
                                      style="font-size:16px">Inherited and item tags</el-radio>
                        </div>
                        <div v-for="(item, index) in markForm.dynamicItem"
                             :key="index">
                            <el-form-item label="名称"
                                          :prop="'dynamicItem.' + index + '.name'">
                                <el-input v-model="item.name"></el-input>
                            </el-form-item>
                            <el-form-item label="值"
                                          :prop="'dynamicItem.' + index + '.key'">
                                <el-input v-model="item.key"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="index+1 == markForm.dynamicItem.length"
                                           @click="addItem"
                                           type="primary"
                                           size="mini">增加</el-button>
                                <el-button v-if="index !== 0"
                                           @click="deleteItem(item, index)"
                                           type="danger"
                                           size="mini">删除</el-button>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="onSubmit"
                                       size="mini">确定</el-button>

                        </el-form-item>
                    </el-form>

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                radio: '1',
                markForm: {
                    dynamicItem: [
                        {
                            name: "",
                            phone: ""
                        }
                    ]
                },
                form: {
                    a: '90d',
                    b: '365d',
                    name: '',
                    type: [],
                    type1: []
                },
                activeName: 'first'
            };
        },
        methods: {
            //追加数据
            addItem () {
                this.markForm.dynamicItem.push({
                    name: "",
                    key: ""
                });
            },
            //删除
            deleteItem (item, index) {
                this.markForm.dynamicItem.splice(index, 1);
            },
            //切换
            handleClick (tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>
<style scoped>
    .width {
        width: 600px;
    }
    .el-radio__input.is-checked + .el-radio__label {
        font-size: 16px;
    }
</style>